import vue from "vue";
import confirm from "./confirm.vue";
//使用vue的extend，以vue文件为基础组件，返回一个可以创建vue组件的特殊构造函数
const confirmConstructor = vue.extend(confirm);
let toastDom;
confirm.install = function(Vue, options) {
  // Vue为实例，options为外面调用$confirmm传进来的参数函数

  toastDom = new confirmConstructor({
    el: document.createElement("div"),
    data: {
      affirm:'默认',
      ...options
    }
  }); //在body中动态创建一个div元素，后面自动会把它替换成整个vue文件内的内容

  // document.body.appendChild(toastDom.$el);
  document.body.appendChild(toastDom.$mount().$el);
  //   $on之前$off清掉事件
  toastDom.$off("on-cancel");
  toastDom.$off("on-affirma");

  toastDom.$on("on-cancel", () => {
    // 取消删除节点
    setTimeout(()=>{
      document.body.removeChild(toastDom.$el);
    },200)
  });
  toastDom.$on("on-affirma", mag => {
    // 将mag值传给options对象中的onCancel事件,外面就能拿到
    console.log(options);
    options && options.onAffirma && options.onAffirma(mag); //用&&判断外面是否需要触发onAffirma
  });
  toastDom.show = true;
};

function hideConfirm() {
  toastDom.show = false;
}

function registryConfirm() {
  //把showToast这个方法添加到uve的原型中，可以直接调用，当调用的时候就是执行函数内的内容
  vue.prototype.$confirmm = confirm.install;
  vue.prototype.$confirmm.hide = hideConfirm;
}

export default registryConfirm;





// 不用install的方法

//  function showConfirm(options) {

//   const toastDom = new confirmConstructor({
//     el: document.createElement("div"),
//     data: options
//   }); //在body中动态创建一个div元素，后面自动会把它替换成整个vue文件内的内容

//   document.body.appendChild(toastDom.$el);
//   // document.body.appendChild(toastDom.$mount().$el);

//   //   $on之前$off清掉事件
//   toastDom.$off("on-cancel");
//   toastDom.$off("on-affirma");

//   toastDom.$on("on-cancel", () => {
//     // 取消删除节点
//     setTimeout(()=>{
//       document.body.removeChild(toastDom.$el);
//     },1000)
//   });
//   toastDom.$on("on-affirma", mag => {
//     // 将mag值传给options对象中的onCancel事件,外面就能拿到
//     options && options.onAffirma && options.onAffirma(mag)//用&&判断外面是否需要触发onAffirma
//   });
//   toastDom.show=true
// };

// function registryConfirm () {
//   //把showToast这个方法添加到uve的原型中，可以直接调用，当调用的时候就是执行函数内的内容
//   vue.prototype.$confirmm = showConfirm

// }

// export default registryConfirm;
